<template>
    <div id="app">
        <v-app id="inspire">
            <v-data-table
                    :headers="headers"
                    :items="hosts"
                    class="elevation-1"
                    loading-text="Loading... Please wait"
            >
                <template v-slot:top>
                    <v-toolbar flat color="white">
                        <v-toolbar-title>KubeEdge Application Management</v-toolbar-title>
                        <v-divider
                                class="mx-4"
                                inset
                                vertical
                        ></v-divider>
                        <v-spacer></v-spacer>
                        <v-dialog v-model="dialog" max-width="1000">
                            <template v-slot:activator="{ on, attrs }">
                                <v-btn
                                        color="primary"
                                        dark
                                        class="mb-2"
                                        v-bind="attrs"
                                        v-on="on"
                                >New Item</v-btn>
                            </template>
                            <v-card>
                                <v-card-title>
                                    <span class="text-h5">Deployment Wizard</span>
                                </v-card-title>
                                <v-card-text>

                                        <horizontal-stepper :steps="demoSteps" @completed-step="completeStep" :top-buttons="true"
                                             @active-step="isStepActive" @stepper-finished="alert"></horizontal-stepper>

                                </v-card-text>
                            </v-card>
                        </v-dialog>

                    </v-toolbar>
                </template>
                <template v-slot:item.actions="{ item }">
                    <v-icon
                            class="mr-2"
                            @click="editItem(item)"
                    >
                        mdi-monitor-multiple
                    </v-icon>
                    <v-icon
                            class="mr-2"
                            @click="deleteItem(item)"
                    >
                        mdi-delete
                    </v-icon>
                </template>
            </v-data-table>
        </v-app>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import HorizontalStepper from 'vue-stepper'
import StepOne from './StepOne.vue';
import StepTwo from './StepTwo.vue';
import StepThree from './StepThree.vue';
export default {
    components: {
        HorizontalStepper
    },
    data: () => ({
        demoSteps: [
            {
                icon: 'settings_applications',
                name: 'first',
                title: 'Pod Configuration',
                subtitle: 'Global Parameters',
                component: StepOne,
                completed: false
            },
            {
                icon: 'call_to_action',
                name: 'second',
                title: 'Dcoker Configuration',
                subtitle: 'Setting for Containers',
                component: StepTwo,
                completed: false
            },
            {
                icon: 'rate_review',
                name: 'third',
                title: 'Review & Lanuch',
                subtitle: 'Add to Kuberenetes',
                component: StepThree,
                completed: false
            }
        ],
        activeStep: 0,
        hosts: [{
            deployment_name: 'Redis',
            replica: 3,
            image: "amdv8/proxy",
            carbs: 24,
            status: "up",
        }],
        password_show: false,
        dialog: false,
        groupdialog: false,
        headers: [
            {text: 'Deployment Name', align: 'start', value: 'deployment_name'},
            {text: 'Replica', value: 'replica'},
            {text: 'Images', value: 'image'},
            {text: 'Status', value: 'status'},
            {text: 'Actions', value: 'actions', sortable: false}
        ],
    }),
    methods: {
        completeStep(payload) {
            this.demoSteps.forEach((step) => {
                if (step.name === payload.name) {
                    step.completed = true;
//                    console.log(payload.name)
//                console.log(JSON.stringify(this.sum))
                }
            })
        },
        isStepActive(payload) {
            this.demoSteps.forEach((step) => {
                if (step.name === payload.name) {
                    if(step.completed === true) {
                        step.completed = false;
                    }
                }
            })
        },
        alert(payload) {
            alert('end')
        },
    }
}
</script>